<template>
  <div class="Main">
    <div class="MainTitle">音频列表</div>
    <div class="MianContent">
      <a-button
        type="primary"
        style="margin-bottom: 20px"
        size="large"
        @click="createYp"
        >生成音频</a-button
      >
      <a-table
        :columns="listfields"
        :data-source="listData"
        :bordered="true"
        :pagination="false"
      >
        <div slot="indexNum" slot-scope="row, index">
          {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
        </div>
        <div slot="action" slot-scope="row, index">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin-bottom: 6px;
            "
          >
            <a-button type="primary" size="small" @click="download(index)"
              >下载</a-button
            >
            <a-popconfirm
              placement="bottom"
              ok-text="删除"
              cancel-text="取消"
              @confirm="DeleteItem(index)"
            >
              <template slot="title">
                <p>警告</p>
                <p>此操作将永久删除该音频, 是否继续?</p>
              </template>
              <a-button type="danger" size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </div>
        <div slot="logo" slot-scope="row, index">
          <img
            style="width: 50px; height: 50px"
            @click="seeImg(index)"
            :src="row"
            alt=""
          />
        </div>
      </a-table>
      <Pagination
        :total="total"
        v-model="pageno"
        :pageSize.sync="pagesize"
        @change="handlePageChange"
        @onShowSizeChange="onShowSizeChange"
      ></Pagination>
      <a-modal
        title="生成音频"
        v-model="modalShow"
        centered
        ok-text="确认"
        :maskClosable="false" 
        cancel-text="取消"
        @cancel="cancelBtn"
        @ok="modalSubmit"
        :width="700"
      >
        <div style="padding-left: 10px">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="音频名称" prop="name">
              <a-input
                v-model="form.name"
                placeholder="请输入音频名称"
                allowClear
              />
            </a-form-model-item>
            <a-form-model-item label="音高" prop="pitchRatio">
              <a-input
                v-model="form.pitchRatio"
                :min="0"
                type="number"
                allowClear
                placeholder="请输入音高"
              />
            </a-form-model-item>
            <a-form-model-item label="语速" prop="speedRatio">
              <a-input
                v-model="form.speedRatio"
                :min="0"
                type="number"
                allowClear
                placeholder="请输入语速"
              />
            </a-form-model-item>
            <a-form-model-item label="音量" prop="volumeRatio">
              <a-input
                v-model="form.volumeRatio"
                :min="0"
                type="number"
                allowClear
                placeholder="请输入音量"
              />
            </a-form-model-item>
            <a-form-model-item label="选择音色" prop="speakerId">
              <a-select
                v-model="form.speakerId"
                placeholder="选择音色"
                allowClear
                style="width: 220px"
              >
                <a-select-option
                  :value="item.SpeakerID"
                  v-for="(item, index) in ysListData"
                  :key="index"
                >
                  {{ item.SpeakerID }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="文本" prop="text">
              <a-input
                v-model="form.text"
                type="textarea"
                allowClear
                :rows="8"
                
                placeholder="请输入文本"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
      <a-modal v-model="LookImages" :footer="null" centered>
        <div style="margin: 10px">
          <img :src="SelectImg" style="width: 100%; height: 100%" />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import UploadImage from "@/components/common/Upload";
import { CliSelectList } from '@/views/Columns/CliSelect.js';
import {
  GetDataList,
  GetAiVoiceList,
  MakeHandle,
  DeleteVoice
} from "@/api/api.js";
export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      modalShow: false,
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      total: 0, //总数
      listData: [], //表格数据
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      keyword: "",
      listfields:CliSelectList,
      form: {
        name: "",
        pitchRatio: "",
        speedRatio: "",
        volumeRatio: "",
        text: "",
        speakerId: undefined
      },
      rules: {
        name: [{ required: true, message: "请输入音频名称!", trigger: "blur" }],
        pitchRatio: [{ required: true, message: "请输入音高!", trigger: "blur" }],
        speedRatio: [{ required: true, message: "请输入语速!", trigger: "blur" }],
        volumeRatio: [{ required: true, message: "请输入音量!", trigger: "blur" }],
        text: [{ required: true, message: "请输入文本!", trigger: "blur" }],
        speakerId: [{ required: true, message: "请选择音色!", trigger: "blur" }],
      },
      LookImages: false,
      SelectImg: "",
      current:'1',
      ysListData:[], //音色数据
    };
  },
  computed: {
    // ...mapState({
    //   listfields: (state) => state.ProductBrand.fields, //获取table头
    // }),
  },
  mounted() {
    // this.GetFields();
    this.GetList();
  },
  methods: {
    // ...mapActions({
    //   GetFields: "ProductBrand/GetFields", //获取table头
    // }),

    // 查看图片
    seeImg(row) {
      const that = this;
      that.LookImages = true;
      that.SelectImg = row.logo;
    },

    // 选择tabs
    selectTabs(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },

    createYp(){
      const that = this;
      that.modalShow = true;
      that.GetYsList()
    },

    // 获取音频列表
    async GetList() {
      let that = this;
      let params = {
        keywords: that.keyword,
        page: that.pageno,
        pageSize: that.pagesize,
      };
      const res = await GetDataList(params);
      if (res.data.code == 0) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.SpeakerID;
            item.indexNum = index;
            // item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
            item.CreateTime = that
              .$moment(item.CreateTime)
              .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
            item.ExpireTime = that
              .$moment(item.ExpireTime)
              .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.total;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    
    // 获取音色列表
    async GetYsList() {
      let that = this;
      const res = await GetAiVoiceList();
      if (res.data.code == 0) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.length > 0) {
          data.forEach((item, index) => {
            item.key = item.SpeakerID;
          });
        }
        let dataArr = data.filter(item => item.State == 'Success' || item.State == 'Active')
        console.log(dataArr,'===');
        // that.total = data.total;
        that.ysListData = dataArr;
      } else {
        showError(res.data.msg);
      }
    },

    // 下载按钮
    download(row){
      const url = row.url;
      const name = row.name;
      // const a = document.createElement('a');
      // const link = document.createElement('a');
      // link.href = url;
      window.open(url, '_blank');
      // link.download = name;
      // link.click();
    },

    // 弹出确定
    async modalSubmit() {
      let that = this;
      that.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // let params = {...that.form};
          let form = that.form;
          let params = {
            name: form.name,
            pitchRatio: form.pitchRatio*1,
            speedRatio: form.speedRatio*1,
            volumeRatio: form.volumeRatio*1,
            text: form.text,
            speakerId: form.speakerId
          }
          // if (that.form.id) {
          //   //编辑
          //   params.id = that.form.id;
          //   let res = await GetProductBrandEdit(params);
          //   if (res.data.code == 1) {
          //     showSuccess("编辑成功");
          //     that.modalShow = false;
          //     that.cancelBtn();
          //     that.GetList();
          //   } else {
          //     showError(res.data.msg);
          //   }
          // } else {
            //新增
            let res = await MakeHandle(params);
            if (res.data.code == 0) {
              showSuccess("生成成功");
              that.modalShow = false;
              that.cancelBtn();
              that.GetList();
            } else {
              showError(res.data.msg);
            }
          // }
        }
      });
    },
    // 弹出取消
    cancelBtn() {
      const that = this;
      that.$refs.ruleForm.resetFields();
      that.form.name = "";
      that.form.pitchRatio = "";
      that.form.speedRatio = "";
      that.form.volumeRatio = "";
      that.form.text = "";
      that.form.speakerId = undefined;
      // that.$refs.uploadImg.clearFile()
      that.modalShow = false;
    },

    // 删除品牌
    async DeleteItem(row) {
      const that = this;
      let res = await DeleteVoice({ id: row.id });
      if (res.data.code == 0) {
        showSuccess("删除成功");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },
    // 编辑品牌
    // toEdit(row) {
    //   console.log(row);
    //   const that = this;
    //   that.form.id = row.id;
    //   that.form.title = row.title;
    //   that.form.sort = row.sort;
    //   that.form.logo = row.logo ? [{ url: row.logo }] : [];
    //   that.form.type = row.type;
    //   that.modalShow = true;
    // },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },
  },
};
</script>

<style scoped lang="stylus">
.editable-row-operations a {
  margin-right: 12px;
}
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }
  .MainTitle:before {
    content: '';
    width: 40px;
    height: 12px;
    background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
    position: absolute;
    bottom: 2px;
    left: 0;
  }
  .MianContent {
    padding: 10px 20px 20px 20px;
    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .MainTopActionOne {
          margin-right: 30px;
          span {
            margin-right: 20px;
          }
        }
        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }
      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}
</style>